<style src="@/css/components/table.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/popover.css"></style>
<style>
.plan-list {
    background: #fff;
    padding: 30px;
}
.pages {
    margin-top: 30px;
}

.mb20 {
    margin-bottom:20px !important;
}
.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}
</style>
<template>
    <section class="plan-list">
        <el-button type="primary" class="showdow mb20" @click="gotoPath('/study/next-plan')" >创建计划</el-button>
        <div>
            <el-table :data="list" style="width: 100%" class="newTab first-table" @sort-change="rankFn">
                <el-table-column prop="Title" label="学习计划名称" min-width="35%">
                    <template slot-scope="scope">
                        <el-popover
                            popper-class="popover"
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.Title">
                            <span slot="reference">{{scope.row.Title.substr(0,20)}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="TotalAllotNum" label="参加人数" min-width="15%"></el-table-column>
                <el-table-column prop="startOrder" label="起始时间" min-width="15%" sortable>
                    <template slot-scope="scope">
                         {{ scope.row.StartTime }} ~ {{ scope.row.FinishTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" label="创建时间" min-width="15%" sortable></el-table-column>
                <el-table-column label="操作" min-width="20%">
                <template slot-scope="scope">
                        <span class="operate" @click="deleteTip(scope.row.StudyID)" v-if=" creentTab == 0 || creentTab == 2">删除</span>
                        <router-link tag="span" :to="{ path: '/study/next-plan', query: { studyID: scope.row.StudyID }}" class="operate" v-if=" creentTab == 0">编辑</router-link>
                    <router-link tag="span" :to="{ path: '/study/plan-info', query: { studyID: scope.row.StudyID }}"  class="operate">详情</router-link>
                </template>
                </el-table-column>
            </el-table>

            <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage" v-if="total >= 10"></pageModel>
        </div>


        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont" style="text-align:center">学习计划删除后，将无法恢复</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary"  class="shadow" @click="deleteFn">确 定</el-button>
            </span>
        </el-dialog>


    </section>
</template>

<script>

import qs from 'qs'
import pageModel from "components/pageModel.vue"

export default{
    data: function(){
        return {
            headTabID:1,
            list:[],
            pageSize: 10,
            total:0,
            page:1,
            path: [
                {
                    'name':'培训学习',
                    'path':'/study/plan-list'
                },
                {
                    'name':'学习计划'
                }
            ],
            tab:[
                {
                    name: '未开始',
                    type: '0'
                },
                {
                    name: '进行中',
                    type: '1'
                },

                {
                    name: '已结束',
                    type: '2'
                }
            ],
            startOrder:'',
            CreateTime:'',
            studyStatus:0,
            id:'',
            deleteState:false
        }
    },
    mixins: [mixinMethods],
    methods: {
        getList(){
            axios.post('/com/study/studyList', qs.stringify({
                pagesize:this.pageSize,
                page:this.page,
                studyStatus: this.creentTab || 0,
                startOrder:this.startOrder,
                createOrder:this.createOrder
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Row;
                    this.total= Number(d.data.Total);
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        deleteTip(id) {
            this.id = id
            this.deleteState = true
        },

        async deleteFn() {
            const {data} = await axios.post('/com/study/delStudy', qs.stringify({'StudyID': this.id}))

            if(data.flag == 1){
                this.deleteState = false
                this.getList()
            } else {
                this.$message.error(data.msg)
            }
        },

        // 当前显示条数发生改变
        getPageSize(value) {
            this.pageSize = value
            this.getList()
        },

        // 当前分页改变
        getPage(value) {
            this.page = value
            this.getList()
        },

        rankFn(value) {
            this[value.prop] = value.ascending == 'ascending' ? 'asc' : 'desc'
            this.getList()
        }
    },
    components:{
        pageModel
    },
    watch:{
        creentTab(){
            this.page = 1
            this.getList()
        }
    },
    computed: {
        creentTab(){
            return this.$store.state.creentTab
        }
    },

    mounted: function(){
        this.$store.commit('setPath', this.path)
        // 设置tab切换
        this.$store.commit('setTab', this.tab)

        // 设置tab初始值
        this.$store.commit('setTabCur', 0)

         this.getList();
    }
}


</script>
